<%--
  Created by IntelliJ IDEA.
  User: WangXin
  Date: 2020/2/25
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <title>商品图片编辑页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" media="all">
    <script type="text/javascript" src="js/layui/layui.js"></script>

</head>

<body>

<div class="layui-container" style="margin-top: 30px;">
    <div class="layui-row">
        <div class="layui-col-xs10 layui-col-xs-offset1">
            <div class="layui-form-item">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    <form class="layui-form">
                        <div id="uploadQRcode" class="layui-upload">
                            <div class="layui-upload-list">
                                <img id="thumbPicPath" src="${thumbPicPath}" alt="" class="layui-upload-img"
                                     style="height: 82px;width:127px;border:1px solid black;">
                                <img id="thumbPicPath2" src="" alt="" class="layui-upload-img"
                                     style="height: 82px;width:127px;border:1px solid black;
                                     position:absolute;left: 470px;top: 35px; display: none">
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs4">
                                    <button type="button" class="layui-btn layui-btn-sm" id="upload01">
                                        <i class="layui-icon">&#xe67c;</i>修改封面图
                                    </button>
                                </div>
                                <div id="startDiv" style="position:absolute;left: 170px;top:112px;">
                                    <button type="button" class="layui-btn layui-hide layui-btn-sm" id="startUpload01"
                                            lay-filter="startUpload01" lay-submit=""
                                            style="margin-left: 30px;">保存修改
                                    </button>
                                </div>
                                <div id="startDiv2" style="position:absolute;left: 315px;top:112px;">
                                    <button type="button" class="layui-btn layui-hide layui-btn-sm" id="exit"
                                            style="margin-left: 30px;">重置
                                    </button>
                                </div>
                            </div>
                            <div style="position:absolute;left: 200px;top: 50px; color: #c2c2c2;margin:10px 0;">
                                封面图（宽：254px 高：163px）
                            </div>
                        </div>
                        <input class="fileupload-input" id="picpath1" type="hidden" name="picpath1"
                               value="${thumbPicPath}">
                        <input class="fileupload-input" id="picpath2" type="hidden" name="picpath2" value="">
                        <input class="fileupload-input" id="goodsId" type="hidden" name="goodsId" value="${goodsId}"/>
                        <input class="fileupload-input" id="mark" type="hidden" name="mark" value="thumbPic"/>
                    </form>
                </blockquote>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                    <div id="uploadQRcode2" class="layui-upload">
                        <div class="layui-upload-list">
                            <img id="infoPicPath" src="${infoPicPath}" alt="" class="layui-upload-img"
                                 style="height: 80px;width:140px;border:1px solid black;">
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4">
                                <button type="button" class="layui-btn layui-btn-sm" id="jumpInfoPicPage">
                                    <i class="layui-icon">&#xe67c;</i>修改详情图
                                </button>
                            </div>
                        </div>
                        <div style="position:absolute;left: 200px;top: 240px; color: #c2c2c2;margin:10px 0;">
                            详情图（宽：560px 高：320px）
                        </div>
                    </div>
                </blockquote>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                    <div id="uploadQRcode3" class="layui-upload">
                        <div class="layui-upload-list">
                            <img id="lunboPicPath1" src="${picPath1}" alt="" class="layui-upload-img"
                                 style="height: 106px;width:100px;border:1px solid black;">
                            <img id="lunboPicPath2" src="${picPath2}" alt="" class="layui-upload-img"
                                 style="height: 106px;width:100px;border:1px solid black;">
                            <img id="lunboPicPath3" src="${picPath3}" alt="" class="layui-upload-img"
                                 style="height: 106px;width:100px;border:1px solid black;">
                            <img id="lunboPicPath4" src="${picPath4}" alt="" class="layui-upload-img"
                                 style="height: 106px;width:100px;border:1px solid black;">
                            <img id="lunboPicPath5" src="${picPath5}" alt="" class="layui-upload-img"
                                 style="height: 106px;width:100px;border:1px solid black;">

                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4">
                                <button type="button" class="layui-btn layui-btn-sm" id="jumpLunboPicPage">
                                    <i class="layui-icon">&#xe67c;</i>修改轮播图
                                </button>
                            </div>
                        </div>
                        <div style="position:absolute;left: 200px;top: 500px; color: #c2c2c2;margin:10px 0;">
                            轮播图（宽：500px 高：530px）
                        </div>
                    </div>
                </blockquote>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    layui.config({
        base: '<%=basePath%>/layui/lay/mymodules/'
    }).use(["element", "layer", 'croppers', "form", "table", "jquery"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var croppers = layui.croppers;
        var $ = layui.jquery;

        croppers.render({
            elem: '#upload01'
            , saveW: 254     //保存宽度
            , saveH: 163
            , mark: 254 / 163    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "goodsDetail/uploadPic.do"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (data) { //上传完毕回调
                // console.log(data);
                $("#thumbPicPath2").attr('src', data);
                $("#picpath2").attr('value', data);

                $("#thumbPicPath2").css("display", "block")
                $("#upload01").css("display", "none")
                $("#startUpload01").removeClass('layui-hide')
                $("#exit").removeClass('layui-hide')


            }
        });

        $(document).on('click', '#exit', function () {
            //重新加载当前页面
            location.reload();
        });

        //监听提交
        form.on('submit(startUpload01)', function (data) {
            $.ajax({
                url: "goodsDetail/updatePic.do",
                method: "post",
                data: data.field,
                dataType: "json",
                success: function (data) {
                    if (data.statusCode === '200') {
                        layer.msg(data.message, {icon: 6, time: 1000});
                        //重新加载当前页面
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(data.message, {icon: 5, time: 1000});
                    }
                }
            })
            return false;
        });

    });
</script>

<script type="text/javascript">
    layui.config({
        base: '<%=basePath%>/layui/lay/mymodules/'
    }).use(["element", "layer", 'croppers', "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        var goodsId = '${goodsId}';

        $('#jumpInfoPicPage').bind('click', function () {

            var infoPicPath = '${infoPicPath}';

            layer.open({
                type: 2,
                area: ['1200px', '700px'],
                title: '修改商品介绍图',
                shadeClose: true,
                content: ['goodsDetail/toEditInfoPicPage.do?infoPicPath=' + infoPicPath + '&goodsId=' + goodsId, 'no'],
                end: function () {
                    window.location.reload()
                }
            });
        })

        $('#jumpLunboPicPage').bind('click', function () {

            sessionStorage.setItem('goodsId', goodsId);//将数据存入sessionStorage,在弹出层获取并销毁
            layer.open({
                type: 2,
                area: ['1000px', '750px'],
                title: '修改轮播图',
                shadeClose: true,
                maxmin: true,
                content: 'goodsDetail/toEditLunboPage.do',
                end: function () {
                    //console.log('end')
                    window.location.reload()
                    //table.reload("menuTeble");
                }
            });
        })
    });

</script>


</body>

</html>

